<template>
    <div>
        <h3>图片详情</h3>
        <p>{{pic_url}}</p>
        <span>现在时间为： {{ new Date() | dateFormat}}</span>
        <hr>
        <img src="http://www.sinaimg.cn/dy/slidenews/40_img/2015_45/29253_4592722_820073.jpg">
        <!--缩略图区域-->
        <div class="thumbs">
            <vue-preview :slides="slide1" @close=""></vue-preview>
            <!--<img class="preview-img" v-for="(item, index) in list" :src="item.thumbUrl" height="100" @click="$preview.open(index, list)" :key="item.thumbUrl">-->

        </div>

        <!--图片内容区域-->
        <div class="content">
        </div>


        <!--放置一个现成的评论子组件-->
        <cmt-box :key="(new Date()).getTime()"></cmt-box>
    </div>
</template>

<script>
    import comment from '../subcomponents/Comment.vue'

    export default {
        name: "PhotoInfo",
        data() {
            return {
                pic_url: this.$route.params.pic_url,
                list: [],
                slide1: []  // 缩略图
            }
        },
        created() {
            this.getPhotoInfo();
            this.getThumbs();
        },
        methods: {
            getPhotoInfo() {
                // 获取图片的详情
                this.$http.jsonp('http://pic.sogou.com/pics?query=美女mode=1&start=10&reqType=ajax&reqFrom=result&tn=0').then(
                    result => {
                        if (result.body.items.length > 0) {
                            this.list = result.body.items;
                        } else {
                            Toast('没有美女看了！死心了吧！');
                        }
                    }
                )
            },
            getThumbs() {
                // 获取图片的详情
                this.$http.jsonp('http://pic.sogou.com/pics?query=校花mode=1&start=10&reqType=ajax&reqFrom=result&tn=0').then(
                    result => {
                        console.log(1111);
                        console.log(result.body.items);
                        if (result.body.items.length > 0) {
                            // 循环每个图片数据，补全图片的宽和高
                            result.body.items.forEach(item => {
                                var tempObj = {};
                                tempObj.src = item.pic_url;
                                tempObj.msrc = item.thumbUrl;
                                tempObj.alt = 'picture2';
                                tempObj.title = 'Image Caption 2';
                                tempObj.w = 400;
                                tempObj.h = 500;
                                this.slide1.push(tempObj);
                            });
                        } else {
                            Toast('没有美女看了！死心了吧！');
                        }
                    }
                )

            }
        },
        components: { // 注册子组件
            'cmt-box': comment
        }
    }
</script>

<style lang="scss" scoped>

    img {
        width: 100%;
    }

</style>